import { Suspense } from 'react';
import { Navigate } from 'react-router';
import Admin from '@/layouts/Admin';
import BigScreen from '@/layouts/BigScreen';
import Login from '@/pages/Login';
import Loading from '@/components/Loading';
import NotFind from '@/pages/NotFind';
import type { RouteObject } from 'react-router';
import type { TDirModuleItem } from '@/utils/get-dir-module-map';
import { ERouteId } from '@/types/router';
import { lazy } from 'react';
import { createHashRouter } from 'react-router';
import getDirModuleMap, { isDir } from '@/utils/get-dir-module-map';

const [Home] = [() => import('@/pages/Home')].map((item) => {
  const Com = lazy(item);
  return () => (
    <Suspense fallback={<Loading />}>
      <Com />
    </Suspense>
  );
});

// const Home = lazy(() => import)

const getRouteChildren = (dirMap: Array<TDirModuleItem>, children: Array<RouteObject> = []) => {
  dirMap.forEach((item) => {
    let child: RouteObject;
    let path: string;
    if (isDir(item)) {
      const parentDir = item.dirPathArr.at(-1) ?? '';
      if (!item.name.startsWith('group-') && !parentDir.startsWith('group-')) return;
      path = item.hyphenStyleName;
      child = {
        path,
        children: []
      };
      const beIndex = item.files.find((item) => !item.isDir && item.name === 'index') as
        | Exclude<TDirModuleItem, { isDir: true }>
        | undefined;
      if (beIndex) {
        const Com = lazy(beIndex.module);
        child.element = (
          <Suspense fallback={<Loading />}>
            <Com />
          </Suspense>
        );
      }
      getRouteChildren(item.files, child.children);
    } else {
      if (['index'].includes(item.name)) return;
      path = item.hyphenStyleName;
      const Com = lazy(item.module);
      child = {
        path,
        element: (
          <Suspense fallback={<Loading />}>
            <Com />
          </Suspense>
        )
      };
    }

    if (children.length === 0) {
      children.push({ index: true, element: <Navigate to={path} /> });
    }
    children.push(child);
  });

  return children;
};

const modules = import.meta.glob('@/pages/**/*.tsx');

const moduleMap = getDirModuleMap(modules);

const adminRoutes = getRouteChildren(moduleMap);
adminRoutes[0].element = <Navigate to={'home'} />;
export const routes: Array<RouteObject> = [
  {
    path: '/',
    element: <Navigate to="/admin" />
  },
  {
    path: '/login',
    id: ERouteId.Login,
    element: (
      <Suspense fallback={<div>我是加载边界</div>}>
        <Login />
      </Suspense>
    )
  },
  {
    path: '/admin',
    id: ERouteId.Admin,
    element: <Admin />,
    children: [
      {
        path: 'home',
        element: <Home />
      },
      ...adminRoutes,
      {
        path: '*',
        element: <NotFind />
      }
    ]
  },
  {
    path: '/big-screen',
    id: ERouteId.BigScreen,
    element: <BigScreen />
  },
  {
    path: '*',
    element: <NotFind />
  }
];

const router = createHashRouter(routes);

export default router;
